<template>
  <div contenteditable="true" @blur="input" :placeholder="placeholder">
    {{modelValue}}
  </div>
</template>

<script>
export default {
  name: "EditText",
  props: ['modelValue','placeholder'],
  emits: ['update:modelValue'],
  methods:{
    input(e){
      this.$emit('update:modelValue',e.target.innerText);
    },
  }
}
</script>

<style scoped>
div[contenteditable]:empty:not(:focus):before {
  content: attr(placeholder);
  color: #aaa ;
}
</style>